<template>
    <div>
        <el-scrollbar>

            <div style="margin: 5px; float: left;">
                <el-input @keyup.enter="FindFile" v-model="FileName" placeholder="请输入文件名" suffix-icon="el-icon-search"
                    style="width:200px;size: small; margin-right: 5px;"></el-input>
                <el-input @keyup.enter="FindFile" v-model="Major" placeholder="请输入专业名" suffix-icon="el-icon-search"
                    style="width:200px;size: small; margin-right: 5px;"></el-input>
                <el-input @keyup.enter="FindFile" v-model="Subject" placeholder="请输入科目名" suffix-icon="el-icon-search"
                    style="width:200px;size: small; margin-right: 5px;"></el-input>
                <el-input @keyup.enter="FindFile" v-model="Uploader" placeholder="请输入上传者" suffix-icon="el-icon-search"
                    style="width:200px;size: small; margin-right: 5px;"></el-input>
                <el-button type="primary" style="margin-left: 5px" @click="FindFile">查询</el-button>
                <el-button type="success" @click="resetQuery">重置</el-button>
            </div>

            <el-table :data="FileData" :header-cell-style="{ background: '#f2f5fc', color: '#555555' }" border>
                <el-table-column prop="fileid" label="文件号" width="120px"></el-table-column>

                <el-table-column prop="filename" label="文件名" width="200px"></el-table-column>
                <el-table-column prop="size" label="文件大小" width="150px"></el-table-column>
                <el-table-column prop="author" label="上传者" width="150px"></el-table-column>
                <el-table-column prop="MajorId" label="专业" width="150px">
                    <template #default="scope">
                        <el-tag
                            :type="scope.row.majorid === '1' ? 'success' : (scope.row.majorid === '2' ? 'primary' : (scope.row.majorid === '3' ? 'danger' : 'warning'))"
                            disable-transitions>{{
                                scope.row.majorid === '1' ? '计科' : (scope.row.majorid === '2' ? '信安' : (scope.row.majorid ===
                                    '3' ?
                                    '物联网' : '通信工程')) }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="subject" label="科目" width="120px"></el-table-column>
                <el-table-column prop="date" label="上传日期" width="150px"></el-table-column>
                <el-table-column prop="time" label="上传时间" width="150px"></el-table-column>

                <el-table-column prop="operate" label="操作">
                    <template #default="scope">
                        <el-popconfirm title="确定删除吗?" @confirm="del(scope.row.filename)">
                            <template #reference>
                                <el-button size="small" type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
    </div>
</template>

<script>
import $ from 'jquery';
export default {
    name: "OtherBoard",
    data() {
        let fileTypes1 = ['jpeg', 'jfif', 'pdf', 'doc', 'docx', 'xls', 'ppt', 'pptx', 'txt', 'bmp', 'jpg', 'png', 'tif', 'gif', 'pcx', 'tga', 'exif', 'fpx', 'svg', 'psd', 'cdr', 'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'wmf', 'webp', 'avif', 'apng', 'wav', 'mp3', 'wma', 'real', 'pcm', 'flac', 'aiff', 'wmv', 'asf', 'm3u8', 'vob', 'flv', 'mkv', 'dat', 'avi', 'm4v', 'mp4', 'mov', '3gp', 'mpg', 'mpeg', 'mpe', 'rm', 'rmvb', 'asx'];
        return {
            ALLFile: [],
            FileData: [],
            FileName: '', Major: '', Subject: '', Uploader: '',
            fileTypes1,
        }
    },
    methods: {
        divide_date() {
            this.FileData = [];
            for (let i = 0; i < this.ALLFile.length; i++) {
                let res = this.ALLFile[i].filename.split('.').pop().toLowerCase();
                if (!this.fileTypes1.includes(res)) {
                    this.ALLFile[i]['date'] = this.ALLFile[i].updatedate.substr(0, 10);
                    this.ALLFile[i]['time'] = this.ALLFile[i].updatedate.substr(11, 8);
                    this.FileData.push(this.ALLFile[i]);
                }
            }
        },
        getAllFile() {
            if (localStorage.getItem('is_login') === "true") {
                $.ajax({
                    url: 'http://10.142.225.1:3000/file/all',
                    success: (resp) => {
                        this.ALLFile = resp;
                        this.divide_date();
                    }
                })
            }
            else {
                this.ALLFile = [];
            }
        },
        FindFile() {
            if (localStorage.getItem('is_login') === "true") {
                $.ajax({
                    url: 'http://10.142.225.1:3000/file/search',
                    type: "post",
                    data: {
                        filename: this.FileName,
                        major: this.Major,
                        subject: this.Subject,
                        uploader: this.Uploader
                    },
                    success: (resp) => {
                        this.ALLFile = resp;
                        this.divide_date();
                    }
                })
            }
            else {
                this.ALLFile = [];
            }

        },

        resetQuery() {
            this.FileName = '';
            this.Major = '';
            this.Subject = '';
            this.Uploader = '';
            this.getAllFile();
        },

        del(Filename) {
            $.ajax({
                url: "http://10.142.225.1:3000/file/delete",
                type: "post",
                headers: {
                    'Authorization': 'Bearer ' + localStorage.getItem("token")
                },
                data: {
                    filename: Filename
                },
                success: (resp) => {
                    alert(resp.message);
                    this.resetQuery();
                }
            })
        }
    },
    beforeMount() {
        this.getAllFile();
    }
}
</script>

<style scoped>
.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.demo-image .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    display: inline-block;
    width: 20%;
    box-sizing: border-box;
    vertical-align: top;
}

.demo-image .block:last-child {
    border-right: none;
}

.demo-image .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>
